<template>
  <div class="c-w100">
    <div
      class="c-w100 c-h c-pf c-p-t0 c-p-l0 c-p-b0 c-p-r0 c-translucent-balck50 c-pz100000 c-maxw640 c-m-0auto"
      v-show="shareposter"
    >
      <div class="c-textAlign-l  c-pf c-p-t0 c-p-l0 c-p-r0 c-m-0auto width-440rem">
        <div
          id="spreadImg"
          class="c-br20"
        ></div>
      </div>
    </div>
    <!-- canvas1 c-p-l999999-->
    <div class="c-w100 c-h c-pf c-p-t0 c-p-b0 c-p-l999999" v-if="shareInfo != null">
      <div id="canvas1" v-if="shareInfo.imageId == 1" class="canvas c-p" :style="{backgroundImage: 'url('+shareInfo.shareImg+')', backgroundRepeat: 'no-repeat',backgroundPosition: 'center center', backgroundSize: 'contain'}">
        <div class="c-w100" style="padding-top:120px;">
          <div style="width:90px;height:90px;" class="c-brp50 c-m-0auto">
            <img v-if="shareInfo.isShowRecommender" class="c-brp50" style="width:90px;height:90px;" :src="$addXossFilter(shareInfo.headimgurl, require('@/assets/defult_head.png'))" alt="">
          </div>
          <div class="c-textAlign-c" style="margin:20px 0 0 0;color:#B62921;font-size:24px;">
            <span class="c-fw600" v-if="shareInfo.isShowRecommender">{{shareInfo.nickname.length > 5 ? shareInfo.nickname.substr(0, 5) + '...' : shareInfo.nickname}}</span>
            <span class="c-ml10">{{shareInfo.shareName}}</span>
          </div>
        </div>
        <!-- 内容 -->
        <div style="width:486px;top:298px;" class="c-m-0auto c-pa c-p-l0 c-p-r0">
          <div class="c-flex-column c-flex-center c-bg-white" style="border-radius:20px;" v-if="shareInfo.recShareData != null">
            <div style="width:486px;height:324px;border-top-left-radius:20px;border-top-right-radius:20px;">
              <img class="c-w100 c-h c-object-fit-cover" style="border-top-left-radius:20px;border-top-right-radius:20px;" :src="$addXossFilter(shareInfo.recShareData.avatar != '' && shareInfo.recShareData.avatar, require('@/assets/defult270.png'))" alt="">
            </div>
            <div class="c-w100" style="padding:15px 20px;">
              <p style="color:#333;font-size:27px;" class="c-fw600 c-ww-bw">{{shareInfo.recShareData.prodName}}</p>
            </div>
          </div>
          <div class="c-flex-row c-bg-white" style="margin:30px 0 0 0;padding:10px 12px;border-radius:20px;">
            <div style="width:120px;height:120px;">
              <img class="c-w100 c-h" :src="shareInfo.qrcode" alt="">
            </div>
            <div class="c-flex-grow1 c-w0 c-flex-column c-justify-sb" style="margin-left:18px;padding:10px 0;">
              <template v-for="(item, index) in shareInfo.proTxt">
                <template v-if="item != ''">
                  <p class="c-fc-xblack" style="font-size:20px;" :key="index">{{item}}</p>
                </template>
                <template v-else>
                  <p class="c-fc-xblack" style="font-size:20px;" :key="index" v-if="index == 0">{{shareInfo.isShowRecommender ? shareInfo.nickname : '好友'}}邀请您一起学习</p>
                  <p class="c-fc-xblack" style="font-size:20px;" :key="index" v-if="index == 2">长按识别二维码或保存图片</p>
                </template>
              </template>
            </div>
          </div>
        </div>
      </div>
      <!-- canvas2 -->
      <div id="canvas2" v-if="shareInfo.imageId == 2" class="canvas c-p" :style="{backgroundImage: 'url('+shareInfo.shareImg+')', backgroundRepeat: 'no-repeat',backgroundPosition: 'center center', backgroundSize: 'contain'}">
        <div class="canvas_top c-flex-row c-m-0auto">
          <div class="canvas_left" v-if="shareInfo.isShowRecommender">
            <img class="c-brp50" :src="$addXossFilter(shareInfo.headimgurl, require('@/assets/defult_head.png'))" alt="">
          </div>
          <div class="canvas_right c-flex-grow1 c-w0 c-flex-column" :class="shareInfo.isShowRecommender ?'c-justify-sb':'c-justify-center c-aligni-center marginTop40'">
            <p class="canvas_nickname c-fw600" v-if="shareInfo.isShowRecommender">{{shareInfo.nickname}}</p>
            <p class="canvas_sharename">{{shareInfo.shareName}}</p>
          </div>
        </div>
        <div class="canvas_content c-m-0auto c-pa c-p-l0 c-p-r0">
          <div class="c-flex-column c-flex-center canvas_imgCon" v-if="shareInfo.recShareData != null">
            <div class="canvas_imgTop">
              <img class="c-w100 c-h c-object-fit-cover" :src="$addXossFilter(shareInfo.recShareData.avatar != '' && shareInfo.recShareData.avatar, require('@/assets/defult270.png'))" alt="">
            </div>
            <div class="c-w100 canvas_imgBottom">
              <p class="c-fw600 c-fc-white c-ww-bw">{{shareInfo.recShareData.prodName}}</p>
            </div>
          </div>
          <div class="canvas_dashed"></div>
          <div class="canvas_qr c-flex-row">
            <div class="c-flex-grow1 c-w0 c-flex-column c-justify-sb canvas_qrLeft">
              <template v-for="(item, index) in shareInfo.proTxt">
                <template v-if="item != ''">
                  <p class="c-fc-8E232D" style="font-size:20px;" :key="index">{{item}}</p>
                </template>
                <template v-else>
                  <p class="c-fc-8E232D" style="font-size:20px;" :key="index" v-if="index == 0">{{shareInfo.isShowRecommender ? shareInfo.nickname : '好友'}}邀请您一起学习</p>
                  <p class="c-fc-8E232D" style="font-size:20px;" :key="index" v-if="index == 2">长按识别二维码或保存图片</p>
                </template>
              </template>
            </div>
            <div class="canvas_qrRight">
              <img class="c-w100 c-h" :src="shareInfo.qrcode" alt="">
            </div>
          </div>
        </div>
      </div>
      <!-- canvas3 -->
      <div id="canvas3" v-if="shareInfo.imageId == 3" class="canvas c-p" :style="{backgroundImage: 'url('+shareInfo.shareImg+')', backgroundRepeat: 'no-repeat',backgroundPosition: 'center center', backgroundSize: 'contain'}">
        <div class="canvas_top c-flex-row c-m-0auto">
          <div class="canvas_left" v-if="shareInfo.isShowRecommender">
            <img class="c-brp50" :src="$addXossFilter(shareInfo.headimgurl, require('@/assets/defult_head.png'))" alt="">
          </div>
          <div class="c-flex-grow1 c-w0 c-flex-column c-fc-white" :class="shareInfo.isShowRecommender ?'canvas_right c-justify-sb':'c-justify-center c-aligni-center marginTop40'">
            <p class="canvas_nickname c-fw600" v-if="shareInfo.isShowRecommender">{{shareInfo.nickname}}</p>
            <p class="canvas_sharename">{{shareInfo.shareName}}</p>
          </div>
        </div>
        <div class="canvas_content c-m-0auto c-pa c-p-l0 c-p-r0">
          <div class="c-flex-column c-flex-center canvas_imgCon" v-if="shareInfo.recShareData != null">
            <div class="canvas_imgTop">
              <img class="c-w100 c-h c-object-fit-cover" :src="$addXossFilter(shareInfo.recShareData.avatar != '' && shareInfo.recShareData.avatar, require('@/assets/defult270.png'))" alt="">
            </div>
            <div class="c-w100 canvas_imgBottom">
              <p class="c-fw600 c-fc-xblack c-ww-bw">{{shareInfo.recShareData.prodName}}</p>
            </div>
          </div>
          <div class="canvas_dashed"></div>
          <div class="canvas_qr c-flex-row">
            <div class="c-flex-grow1 c-w0 c-flex-column c-justify-sb canvas_qrLeft">
              <template v-for="(item, index) in shareInfo.proTxt">
                <template v-if="item != ''">
                  <p class="c-fc-sblack" style="font-size:20px;" :key="index">{{item}}</p>
                </template>
                <template v-else>
                  <p class="c-fc-sblack" style="font-size:20px;" :key="index" v-if="index == 0">{{shareInfo.isShowRecommender ? shareInfo.nickname : '好友'}}邀请您一起学习</p>
                  <p class="c-fc-sblack" style="font-size:20px;" :key="index" v-if="index == 2">长按识别二维码或保存图片</p>
                </template>
              </template>
            </div>
            <div class="canvas_qrRight">
              <img class="c-w100 c-h" :src="shareInfo.qrcode" alt="">
            </div>
          </div>
        </div>
      </div>
      <!-- canvas4 -->
      <div id="canvas4" v-if="shareInfo.imageId == 4" class="canvas c-p" :style="{backgroundImage: 'url('+shareInfo.shareImg+')', backgroundRepeat: 'no-repeat',backgroundPosition: 'center center', backgroundSize: 'contain'}">
        <div class="canvas_top c-flex-column c-flex-center c-m-0auto">
          <div class="canvas_head">
            <img v-if="shareInfo.isShowRecommender" class="c-brp50" :src="$addXossFilter(shareInfo.headimgurl, require('@/assets/defult_head.png'))" alt="">
          </div>
          <div class="canvas_text c-fc-white">
            <span class="canvas_nickname c-fw600" v-if="shareInfo.isShowRecommender">{{shareInfo.nickname.length > 5 ? shareInfo.nickname.substr(0, 5) + '...' : shareInfo.nickname}}</span>
            <span class="canvas_sharename c-ml10">{{shareInfo.shareName}}</span>
          </div>
        </div>
        <div class="canvas_content c-m-0auto c-pa c-p-l0 c-p-r0">
          <div class="c-flex-column c-flex-center canvas_imgCon" v-if="shareInfo.recShareData != null">
            <div class="canvas_imgTop">
              <img class="c-w100 c-h c-object-fit-cover" :src="$addXossFilter(shareInfo.recShareData.avatar != '' && shareInfo.recShareData.avatar, require('@/assets/defult270.png'))" alt="">
            </div>
            <div class="c-w100 canvas_imgBottom">
              <p class="c-fw600 c-fc-xblack c-ww-bw">{{shareInfo.recShareData.prodName}}</p>
            </div>
          </div>
          <div class="canvas_qr c-flex-row">
            <div class="canvas_qrleft">
              <img class="c-w100 c-h" :src="shareInfo.qrcode" alt="">
            </div>
            <div class="c-flex-grow1 c-w0 c-flex-column c-justify-sb canvas_qrRight">
              <template v-for="(item, index) in shareInfo.proTxt">
                <template v-if="item != ''">
                  <p class="c-fc-sblack" style="font-size:20px;" :key="index">{{item}}</p>
                </template>
                <template v-else>
                  <p class="c-fc-sblack" style="font-size:20px;" :key="index" v-if="index == 0">{{shareInfo.isShowRecommender ? shareInfo.nickname : '好友'}}邀请您一起学习</p>
                  <p class="c-fc-sblack" style="font-size:20px;" :key="index" v-if="index == 2">长按识别二维码或保存图片</p>
                </template>
              </template>
            </div>
          </div>
        </div>
      </div>
      <!-- 自定义 -->
      <div id="canvas5" class="canvas c-p" v-if="shareInfo.imageId == -1">
        <div v-if="shareInfo.shareName || shareInfo.isShowRecommender" class="c-flex-column c-pa c-p-t80 c-bg-f6 c-ph20 c-pv20 c-br-tr20 c-br-br20 c-ww280 c-opacity80">
          <div class="canvas_left c-flex-row " v-if="shareInfo.isShowRecommender">
            <img class="c-brp50 c-ww90 c-hh90" :src="$addXossFilter(shareInfo.headimgurl, require('@/assets/defult_head.png'))" alt="">
            <div class="c-flex-grow1 c-text-ellipsis1 c-fs24 c-ml20 c-mt10" v-if="shareInfo.isShowRecommender">{{shareInfo.nickname}}</div>
          </div>
          <div class="canvas_sharename c-fs24 c-pb20 c-ww240 c-fs28">{{shareInfo.shareName}}</div>
        </div>
        <div class="c-flex-column c-flex-center">
          <div class="canvas_imgCom">
            <img class="c-w100 c-h c-object-fit-cover" :src="$addXossFilter(shareInfo.shareImg)" alt="">
          </div>
          <div class="c-flex-row canvas_qr">
            <div class="canvas_qrLeft">
              <img class="c-w100 c-h" :src="shareInfo.qrcode" alt="">
            </div>
            <div class="c-flex-grow1 c-w0 c-flex-column c-justify-sb canvas_qrRight">
              <template v-for="(item, index) in shareInfo.proTxt">
                <template v-if="item != ''">
                  <p v-if="index==0" class="c-fc-xblack" style="font-size:24px;" :key="index">{{item}}</p>
                  <p v-if="index!=0" class="c-fc-sblack" style="font-size:20px;" :key="index">{{item}}</p>
                </template>
              </template>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'RecommendPost',
    props: {
      shareposter: {
        type: Boolean,
        default: false
      },
      sharePostInfo: {
        type: Object,
        default: function () {
          return {}
        }
      }
    },
    watch: {
      sharePostInfo(val) {
        this.shareInfo = val;
      },
      shareposter(val) {
        if (val) {
          // 生成海报前，先把之前生成的海报移除
          const spreadImgDom = document.getElementById("spreadImg")
          if (spreadImgDom) {
            spreadImgDom.innerHTML = '';
          }
          this.$nextTick(() => {
            let index = this.shareInfo && this.shareInfo.imageId
            if (this.shareInfo && this.shareInfo.imageId == -1) {
              index = 5
            }
            this.initPoster(index)
          })
          return
        }
      }
    },
    data() {
      return {
        shareInfo: null
      }
    },
    mounted() {
      import(/* webpackChunkName: "html2canvas" */"@/utils/html2canvas-1.4.1").then(res => {
        this.html2canvas = res.default;
        // this.getSpreadInfo();
        // this.initPoster();
      });
      window.addEventListener('popstate', () => {
        this.shareposter = false;
      });
    },
    methods: {
      initPoster(index) {
        let _this = this;
        let shareposter = document.getElementById("canvas" + index);
        this.$loading.show({
          text: "分享海报生成中"
        });
        this.html2canvas(shareposter, {
          useCORS: true,
          backgroundColor: 'transparent',
          height: shareposter.offsetHeight, // 解决当前页面生成图片出现白边问题
          width: shareposter.offsetWidth,
        }).then(canvas => {// eslint-disable-line
          // document.body.appendChild(canvas);
          let ctx = canvas.getContext("2d");
          this.canvasToImage(ctx);
          let shareClose = document.getElementById('shareClose');
          shareClose.removeEventListener('click', function () { });
          shareClose.addEventListener("click", function () {
            // _this.shareposter = false;
            _this.$emit("closeSharePost")
          })
          this.shareposter = true;
        });
      },
      canvasToImage(ctx) {
        try {
          // let dataURL = ctx.canvas.toDataURL("image/jpg");
          let dataURL = ctx.canvas.toDataURL("image/png?x-oss-process=style/common");
          document.getElementById("spreadImg").innerHTML = '';
          document.getElementById("spreadImg").innerHTML = '<div id="shareClose" style="top:-1.75rem;right:0;" class="share-close c-pa iconfont icon-buoumaotubiao20 c-fc-white c-fs40"></div><img style="width:13.6rem;margin:0 auto;" src="' + dataURL + '" class="c-br20 app-save-img" alt><div class="c-pa c-p-tl50 c-fs24 c-fc-white c-w100 c-textAlign-c" style="transform:translateX(-50%);bottom: -1.5rem;"><i class="iconfont icon-zhiwen c-fs24 c-fc-white c-mr12"></i>长按上面图片保存海报</div>'
          this.$loading.hide();
        } catch (err) {
          this.$loading.hide();
          console.log(err.message);
          console.log(err.stack);
        }
      },
    }
  }
</script>

<style lang="less" scoped>
.marginTop40 {
  margin-top: 40px;
}
.c-fc-8E232D {
  color: #8E232D;
}
.canvas {
  width: 640px;
  height: 1136px;
}
#canvas2 {
  .canvas_top {
    position: absolute;
    left: 0;
    right: 0;
    top: 30px;
    width: 530px;
    .canvas_left {
      width: 102px;
      height: 102px;
      img {
        width: 102px;
        height: 102px;
      }
    }
    .canvas_right {
      margin-left: 15px;
      color: #8E232D;
    }
  }
  .canvas_content {
    width: 486px;
    top: 222px;
    .canvas_imgCon {
      background: #FC5A6F;
      border-radius: 20px;
      .canvas_imgTop {
        width: 486px;
        height: 324px;
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
        img {
          border-top-left-radius: 20px;
          border-top-right-radius: 20px;
        }
      }
      .canvas_imgBottom {
        padding: 15px 20px;
        p {
          font-size: 27px;
        }
      }
    }
    .canvas_dashed {
      width: 100%;
      height: 4px;
      margin-top: 30px;
      background: url('../../../assets/i/wap/spread/dasheed.png') repeat center center;
      background-size: contain;
    }
    .canvas_qr {
      margin-top: 33px;
      .canvas_qrLeft {
        padding: 10px 0;
      }
      .canvas_qrRight {
        width: 120px;
        height: 120px;
        margin-left: 12px;
      }
    }
  }
}
#canvas3 {
  .canvas_top {
    position: absolute;
    left: 0;
    right: 0;
    top: 64px;
    width: 527px;
    .canvas_left {
      width: 86px;
      height: 86px;
      img {
        width: 86px;
        height: 86px;
      }
    }
    .canvas_right {
      margin-left: 30px;
      color: #fff;
    }
  }
  .canvas_content {
    width: 486px;
    top: 259px;
    .canvas_imgCon {
      .canvas_imgTop {
        width: 486px;
        height: 324px;
        border-radius: 20px;
        img {
          border-radius: 20px;
        }
      }
      .canvas_imgBottom {
        padding: 20px 10px;
      }
    }
    .canvas_dashed {
      width: 100%;
      height: 4px;
      margin-top: 16px;
      background: #C3BADA;
    }
    .canvas_qr {
      margin-top: 36px;
      .canvas_qrLeft {
        padding: 10px 0;
      }
      .canvas_qrRight {
        width: 120px;
        height: 120px;
        margin-left: 30px;
      }
    }
  }
}
#canvas4 {
  .canvas_top {
    position: absolute;
    left: 0;
    right: 0;
    top: 60px;
    width: 585px;
    .canvas_head {
      width: 102px;
      height: 102px;
      img {
        width: 102px;
        height: 102px;
      }
    }
    .canvas_text {
      margin-top: 12px;
      font-size: 27px;
    }
  }
  .canvas_content {
    width: 536px;
    top: 250px;
    .canvas_imgCon {
      width: 100%;
      padding: 30px 24px;
      background: #fff;
      border-radius: 20px;
      .canvas_imgTop {
        width: 486px;
        height: 324px;
        border-radius: 20px;
        img {
          border-radius: 20px;
        }
      }
      .canvas_imgBottom {
        font-size: 27px;
        margin-top: 15px;
      }
    }
    .canvas_qr {
      width: 100%;
      border-radius: 12px;
      margin-top: 30px;
      padding: 18px 24px;
      background: rgba(255, 255, 255, .8);
      .canvas_qrleft {
        width: 120px;
        height: 120px;
        margin-right: 20px;
      }
      .canvas_qrRight {
        padding: 10px 0;
      }
    }
  }
}
#canvas5 {
  .canvas_imgCom {
    width: 100%;
    height: 896px;
  }
  .canvas_qr {
    width: 100%;
    padding: 20px 24px;
    background: #fff;
    .canvas_qrLeft {
      width: 200px;
      height: 200px;
    }
    .canvas_qrRight {
      font-size: 27px;
      padding: 10px 0 20px 0;
      margin-left: 10px;
    }
  }
}
.width-440rem {
  width: 11rem;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>